<template>
    <div>
        <Card>
            <Row class="form-row">
                <Form :model="filters" ref="form1" label-position="right" :label-width="90" inline>
                    <FormItem label="小区">
                        <div class="filters-input">
                            <el-select v-model="value2" placeholder="请选择小区">
                                <el-option v-for="item in options2" :value="item.value" :key="item.value">{{ item.label
                                    }}
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="费用类型1">
                        <div class="filters-input">
                            <el-select v-model="filters.type1" placeholder="请选择" @change="typechange">
                                <el-option v-for="item in options3" :value="item.value" :key="item.value"
                                           :label="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="费用类型2">
                        <div class="filters-input">
                            <el-select v-model="filters_type2" placeholder="请选择" no-data-text="暂无数据">
                                <el-option v-for="item in options4" :value="item.value" :key="item.value"
                                           :label="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="费用类型3">
                        <div class="filters-input">
                            <el-select v-model="filters.type3" placeholder="请选择" no-data-text="暂无数据">
                                <el-option v-for="item in options6" :value="item.value" :key="item.value"
                                           :label="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="收费项目">
                        <div class="filters-input">
                            <el-select v-model="value1">
                                <el-option v-for="item in options1" :value="item.value" :key="item.value">{{ item.label
                                    }}
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="收费方式">
                        <div class="filters-input">
                            <el-select v-model="value2">
                                <el-option v-for="item in options5" :value="item.value" :key="item.value">{{ item.label
                                    }}
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="开始时间">
                        <div class="filters-input">
                            <DatePicker @on-change="" format="yyyy-MM-dd" type="date" confirm placement="bottom-start"
                                        placeholder="请选择开始日期" v-model="date"></DatePicker>
                        </div>
                    </FormItem>
                    <FormItem label="结束时间">
                        <div class="filters-input">
                            <DatePicker @on-change="" format="yyyy-MM-dd" type="date" confirm placement="bottom-start"
                                        placeholder="请选择解决日期" v-model="date1"></DatePicker>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="handleQuery()" style="margin:5px 5px">
                            搜索
                        </Button>
                    </FormItem>
                </Form>
            </Row>
            <Rom>
                <Button type="success" icon="md-add" @click="handleAdd()" style="margin:5px 5px">
                    新增
                </Button>
                <Tooltip>
                    <Button type="info" icon="ios-undo" @click="importBill()" style="margin:5px 5px">
                        导入
                    </Button>
                </Tooltip>
                <Button type="warning" icon="ios-share-alt" @click="exportExcel()"
                        style="margin:5px 5px">
                    导出
                </Button>
                <Button type="primary" icon="md-download" @click="download()"
                        style="margin:5px 5px">
                    下载模板
                </Button>
            </Rom>
            <Table stripe border :loading="tableLoading" :columns="tableColumn" :data="tableData" ref="table">
            </Table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>
        <Modal v-model="formVisible" :title="bl ? '修改' : '新增'" class="modal-content" width="900" :mask-closable="false">
            <Form :model="modal" :rules="rule" ref="form2" label-position="right" :label-width="110" class="myOpenFrom">
                <FormItem label="小区">
                    <Select v-model="value2">
                        <Option v-for="item in options2" :value="item.value" :key="item.value">{{ item.label }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="费用类型1">
                    <el-select v-model="filters.type1" placeholder="请选择" @change="typechange" style="width: 100%">
                        <el-option v-for="item in options3" :value="item.value" :key="item.value" :label="item.label">
                        </el-option>
                    </el-select>
                </FormItem>
                <FormItem label="费用类型2">
                    <el-select v-model="filters_type2" placeholder="请选择" no-data-text="暂无数据" style="width: 100%">
                        <el-option v-for="item in options4" :value="item.value" :key="item.value" :label="item.label">
                        </el-option>
                    </el-select>
                </FormItem>
                <FormItem label="费用类型3">
                    <el-select v-model="filters.type3" placeholder="请选择" no-data-text="暂无数据" style="width: 250px">
                        <el-option v-for="item in options6" :value="item.value" :key="item.value" :label="item.label">
                        </el-option>
                    </el-select>
                </FormItem>
                <FormItem label="收费项目">
                    <Select v-model="value4">
                        <Option v-for="item in options1" :value="item.value" :key="item.value">{{ item.label }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="标准" prop="room">
                    <Input v-model="modal.room" placeholder="标准"/>
                </FormItem>
                <FormItem label="金额" prop="amount">
                    <Input v-model="modal.amount" placeholder="金额"/>
                </FormItem>
                <FormItem label="收费方式">
                    <Select v-model="value5">
                        <Option v-for="item in options5" :value="item.value" :key="item.value">{{ item.label }}
                        </Option>
                    </Select>
                </FormItem>
            </Form>

            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="formLoading">确定</Button>
            </div>
        </Modal>
        <Modal v-model="modal1" @on-ok="ok" @on-cancel="cancel" width="30">
            <h1 style="text-align:center">确定删除</h1>
        </Modal>
    </div>
</template>


<script>
    import Treeselect from "@riophae/vue-treeselect";
    import Cookies from 'js-cookie'
    import {TOKEN_KEY} from '@/libs/util'

    const token = Cookies.get(TOKEN_KEY)
    //校验规则
    const rules = {
        type: [{
            required: true,
            message: "请选择分类"
        }],
        content: [{
            required: true,
            message: "请输入反馈内容"
        }],
        status1: [{
            required: true,
            message: "请输入状态"
        }],
        program: [{
            required: true,
            message: "请输入解决方案"
        }]
    };
    //打开页面
    let handleAdd = function () {
        this.$refs["form2"].resetFields();
        this.modal = {};
        this.tableLoading = false;
        this.formVisible = true;
        this.bl = false;
    };
    let onCancel = function () {
        this.$refs["form2"].resetFields();
        this.formLoading = false;
        this.formVisible = false;
        this.formFollowVisible = false;
    };
    //保存
    let handleSubmit = function () {
        this.formLoading = false;
        this.formVisible = false;
        this.formFollowVisible = false;
    };
    let typechange = function (value) {
        this.filters_type2 = "";
        this.options4 = [];
        if (value == 1) {
            this.options4 = [{
                value: '1',
                label: '固定收入'
            }, {
                value: '2',
                label: '各类临时收款'
            }, {
                value: '3',
                label: '违约金'
            }, {
                value: '4',
                label: '预收账款'
            }]
        } else {
            this.options4 = [{
                value: '1',
                label: '出入证押金'
            }, {
                value: '2',
                label: '其他押金'
            }, {
                value: '3',
                label: '垃圾清运费'
            }, {
                value: '4',
                label: '代收代付水电气费'
            }]
        }
    }

    export default {
        name: "disList",
        components: {
            Treeselect
        },
        data() {
            return {
                modal_name: '',
                modal_room: '',
                modal_unit: '',//单元
                modal_groupName: '',//组团
                modal_building: '',//楼栋
                bl: '',
                filters_type2: '',
                formVisible: false,
                formFollowVisible: false,
                modal1: false,
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //验证规则
                rule: rules,
                filters: {},
                date: '',
                modal: {},
                options: [{
                    value: '1',
                    label: '应收费用'
                }, {
                    value: '2',
                    label: '应付费用'
                }],
                value: '',
                options1: [{
                    value: '1',
                    label: 'A项目'
                }, {
                    value: '2',
                    label: 'B项目'
                }, {
                    value: '3',
                    label: 'C项目'
                }],
                options2: [{
                    value: '1',
                    label: 'A小区'
                }, {
                    value: '2',
                    label: 'B小区'
                }, {
                    value: '3',
                    label: 'C小区'
                }, {
                    value: '4',
                    label: 'D小区'
                }],
                options3: [{
                    value: '1',
                    label: '应收费用'
                }, {
                    value: '2',
                    label: '应付费用'
                }],
                options4: [],
                options5: [{
                    value: '1',
                    label: '现金缴款'
                }, {
                    value: '2',
                    label: '银行代扣'
                }, {
                    value: '3',
                    label: 'POS'
                }, {
                    value: '4',
                    label: '微信'
                }, {
                    value: '5',
                    label: '支付宝'
                }, {
                    value: '6',
                    label: '公众微信'
                }, {
                    value: '7',
                    label: '减免'
                }, {
                    value: '8',
                    label: '预收款'
                }],
                options6: [{
                    value: '1',
                    label: '欠款'
                }, {
                    value: '2',
                    label: '收款'
                }, {
                    value: '3',
                    label: '预收款'
                }, {
                    value: '4',
                    label: '保证金'
                }],
                //表格数据
                tableData: [
                    {
                        housing: "A小区",
                        type: "应收费用",
                        type1: "固定收入",
                        type2: "保证金",
                        name: "A项目",
                        room: "每天50元",
                        content: "50",
                        program: "微信",
                    },
                    {
                        housing: "B小区",
                        type: "应收费用",
                        type1: "违约金",
                        type2: "收款",
                        name: "A项目",
                        room: "本金的5%",
                        content: "100",
                        program: "支付宝",
                    },
                    {
                        housing: "C小区",
                        type: "应收费用",
                        type1: "各类临时收款",
                        type2: "预付款",
                        name: "A项目",
                        room: "无",
                        content: "43",
                        program: "现金缴款",
                    }
                ],
                //表格字段
                tableColumn: [
                    {
                        title: "小区",
                        key: "housing",
                    },
                    {
                        title: "费用类型1",
                        key: "type",
                    },
                    {
                        title: "费用类型2",
                        key: "type1",
                    },
                    {
                        title: "费用类型3",
                        key: "type2",
                    },
                    {
                        title: "项目",
                        key: "name",
                    },
                    {
                        title: "标准",
                        key: "room",
                    },
                    {
                        title: "金额(元)",
                        key: "content"
                    },
                    {
                        title: "缴费方式",
                        key: "program"
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                //数据表格隐藏那个状态
                tableLoading: false,
                formLoading: false,
                value4: '',
            }
        },
        created: function () {
        },
        methods: {
            typechange,
            handleAdd,
            onCancel,
            handleSubmit,
            handlePage(value) {
                this.pageNum = value;
            },
            handlePageSize(value) {
                this.pageSize = value;
            },
            show() {
                this.$refs["form2"].resetFields();
                this.modal = {};
                this.tableLoading = false;
                this.formVisible = true;
                this.bl = true;
            },
            remove(index) {
                this.modal1 = true
            },
            ok() {
                this.$Message.info('已删除');
            },
            cancel() {
                this.$Message.info('已取消');
            },
            shared(index) {
                this.$Modal.success({
                    title: '共享成功'
                });
            }
        }
    }
</script>
